<template>
  <div class="articleList" ref="listBox" @scroll="onScroll">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 
          load对应的onLoad函数:
          这是专门用来加载数据的函数
          这个函数会在两种情况下自动调用
          1. 数据没有铺满一屏的时候
          2. 当你向上拉需要加载更多数据时调用

            finished用来标记数据是否全部加载完毕
            当它true,就代表加载完了,所以不会再调用onLoad
            当它为false时,就代表没有加载完,onLoad还可以遵守上面的原则自动调用
       -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          @click="runId(item.art_id)"
          v-for="item in list"
          :key="item.art_id"
        >
          <div>{{ item.title }}</div>
          <template>
            <van-grid :border="false" :column-num="item.cover.type">
              <van-grid-item v-for="(pic, idx) in item.cover.images" :key="idx">
                <van-image :src="pic" />
              </van-grid-item>
            </van-grid>
          </template>

          <!-- 作者信息区域 -->
          <div class="info">
            <span>{{ item.aut_name }}</span>
            <span style="margin: 0 10px">{{ item.comm_count }}评论</span>
            <span>{{ item.pubdate | relvTime }}</span>

            <van-icon name="cross" />
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { articleListAPI } from "@/api";

export default {
  props: ["channel_id"],
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      timestamp: Date.now(),
      isLoading: false,
      scTop: 0,
    };
  },
  // 当他重新被显示调用的钩子,用了keep-alive就会产生activated钩子
  activated() {
    this.$refs.listBox.scrollTop = this.scTop;
  },

  methods: {
    // 滚动触发的事件
    onScroll() {
      // 拿到滚动的距离,保存起来
      // console.log(this.$refs.listBox.scrollTop);
      this.scTop = this.$refs.listBox.scrollTop;
    },
    async onLoad() {
      // 异步更新数据
      let res = await articleListAPI({
        channel_id: this.channel_id,
        timestamp: this.timestamp,
      });
      //   console.log(res);

      // 这个数据是在不断的对list重新赋值
      // 就会导致界面上永远只有10条，然后就永远都铺不满，就在不断的加载数据了
      // this.list = res.data.data.results

      //   为了不覆盖,所以应该用push追加,
      // 注意不能把数组直接push出来,而是得到这个数组的每个元素一一铺开来
      this.list.push(...res.data.data.results);

      // 把上一个时间戳也保存到变量里,方便下次请求
      this.timestamp = res.data.data.pre_timestamp;

      // 加载完后改成false,表示本次加载完了,没在加载了
      this.loading = false;

      // 早晚数据要加载完的,如果上一段时间戳为null,表示没有内容了,全部加载完毕
      if (res.data.data.pre_timestamp == null) {
        this.finished = true;
      }
    },

    async onRefresh() {
      let res = await articleListAPI({
        channel_id: this.channel_id,
        // 下拉需要的是最新的新闻,Date.now就是最新的
        timestamp: Date.now(),
      });
      //   console.log(res);
      // 直接赋值,
      this.list = res.data.data.results;
      this.isLoading = false;
    },

    // 跳转详情页
    runId(id) {
      //   console.log(id);
      this.$router.push({
        path: "/home/articleNew",
        query: {
          id,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.articleList {
  position: fixed;
  top: 90px;
  bottom: 50px;
  width: 100vw;
  overflow: auto;

  .info {
    color: rgba(150, 151, 153);

    .van-icon-cross {
      float: right;
    }
  }
}
</style>